<template>
	<view class="sale" v-if="dataList.length > 0" @click.stop="$navigateTo('/subPackages/seckillProduct/index')">
		<view class="li-box u-flex-between">
			<view class="li" v-for="(item,index) in dataList" :key="index">
				<u-image :src="item.product.cover_image || ''" width="164rpx" height="164rpx" radius="8rpx"></u-image>
				<view class="li-content">
					<view class="li-price">原价{{item.minPriceSpec.original_price}}</view>
					<view class="li-heat u-flex u-flex-center" :style="{backgroundImage:`url(${$getImageUrl(heatBase)})`}">
						<view class="u-flex u-col-start">
							<view class="heat-text">秒杀价</view>
							<image class="li-img" :src="$getImageUrl('/user_client/static/icons/dheat.png')" mode=""></image>
						</view>
						<view class="heat-price">{{item.minPriceSpec.seckill_price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				heatBase: '/user_client/image/sale-base.png',
			}
		},
		props: {
			dataList: {
				type: Array,
				default: (() => {
					return [];
				})
			},
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.sale {
		margin-top: 30rpx;

		.li-box {
			width: 694rpx;

			.li {
				width: 164rpx;
				border-radius: 8rpx;
				background-color: #FFFFFF;
				box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);

				.li-content {
					padding: 10rpx 0rpx 12rpx;
					box-sizing: border-box;

					.li-price {
						text-align: center;
						font-size: 20rpx;
						color: #999999;
						text-decoration: line-through;
					}

					.li-heat {
						width: 100%;
						height: 37rpx;
						margin-top: 8rpx;
						line-height: 1;
						background-size: 100% 100%;
						background-repeat: no-repeat;

						.heat-text {
							font-size: 20rpx;
							color: #F3F3F3;
						}

						.li-img {
							margin: 0 6rpx 0 2rpx;
							width: 14rpx;
							height: 17rpx;
						}

						.heat-price {
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>